<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=>, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .cont {
        width: 1200px;
        height: 400px;
        background-color: bisque;
        margin: auto;
      }
      .boxl {
        width: 300px;
        height: 400px;
        background-color: blue;
        float: left;
      }
      .boxl1 {
        width: 300px;
        height: 180px;
        background-color: red;
        font-size: 30px;
        color:aliceblue;
        box-sizing: border-box;
        padding-top:45px;
        padding-left: 20px;
      }
      .boxl-1{
        font-size: 20px;
      }
      .boxl2 {
        width: 300px;
        height: 220px;
        background-color: green;
        background-image: url("https://www.pdsu.edu.cn/images/fgt12.jpg");
        /* color:yellow */
      }
      .boxr {
        width: 900px;
        height: 400px;
        background-color: yellow;
        float: left;
      }
      .boxrup {
        width: 900px;
        height: 250px;
        background-color: purple;
      }
      .boxrdomn {
        width: 900px;
        height: 150px;
        background-color: rgb(255, 0, 136);
      }
      .boxrup1 {
        width: 400px;
        height: 250px;
        background-color: pink;
        float: left;
      }
      .boxrup2 {
        width: 150px;
        height: 250px;
        background-color: orange;
        box-sizing: border-box;
        float: left;
        color:white;
        font-size: 30px;
        writing-mode: vertical-rl;
        padding-right: 20px;
        padding-top: 25px;
      }
      .boxrup2-1{
        font-size: 20px;
      }
      .boxrup3 {
        width: 350px;
        height: 250px;
        background-color: lightblue;
        float: left;
      }
      .boxrdown1 {
        width: 300px;
        height: 150px;
        background-color: navy;
        float: left;
        color:white;
         box-sizing: border-box;
        font-size: 30px;
        padding-left: 60px;
        padding-top: 45px;
      }
      .boxrdown1-1{
        font-size: 20px;
      }
      .boxrdown2 {
        width: 300px;
        height: 150px;
        background-color: teal;
        float: left;
      }
      .boxrdown3 {
        width: 300px;
        height: 150px;
        background-color: maroon;
        float: left;
      }
      .cont1{
        width: 1200px;
        height: 200px;
        background-color:white;
      }
      .cont1-1{
       width:400px;
       height:160px;
       background-image: url("https://www.pdsu.edu.cn/images/dlbg2-1.png");
       margin-left:100px;
      }
    </style>
  </head>
  <body>
    <div class="cont1">       
        <div class="cont1-1"></div>
        <div class="cont1-2"></div>
        <div class="cont1-3"></div>
        <div class="cont1-4"></div>
    </div>
    <div class="cont">
      <div class="boxl">
        <div class="boxl1"> 
            校园风光
            <div class="boxl-1">XIAOYUANFENGGUANG</div>
           <!-- <img src="https://www.pdsu.edu.cn/images/xyfg2.png" alt="Mountains" style="width:100%;height:100%;"> -->
        </div> 
         <div class="boxl2"> 
            <!-- 平顶山学院 -->
            <!-- <img src="https://www.pdsu.edu.cn/images/fgt12.jpg" alt="Nature" style="width:100%;height:100%;"> -->
        
         </div> 
      </div>
        <div class="boxr">
              <div class="boxrup">
                <div class="boxrup1">
                   <img src="https://www.pdsu.edu.cn/images/fgt11.jpg" alt="Nature" style="width:100%;height:100%;">
                </div> 
                <div class="boxrup2"> 
                    学术研究
                    <div class="boxrup2-1">XUESHUYANJIU</div>
                    <!-- <img src="https://www.pdsu.edu.cn/images/xsyj.png" alt="Nature" style="width:100%;height:100%;"> -->
                </div> 
                <div class="boxrup3"> 
                    <img src="https://www.pdsu.edu.cn/images/1.JPG" alt="Nature" style="width:100%;height:100%;">
                </div>
              </div>
              <div class="boxrdomn">
                <div class="boxrdown1"> 
                    学生活动
                    <div class="boxrdown1-1">XUESHENGHUODONG</div>
                    <!-- <img src="https://www.pdsu.edu.cn/images/xshd.png" alt="Nature" style="width:100%;height:100%;"> -->
                </div> 
                <div class="boxrdown2"> 
                    <img src="https://www.pdsu.edu.cn/images/fgt14.jpg" alt="Nature" style="width:100%;height:100%;">
                </div> 
                <div class="boxrdown3"> 
                    <img src="https://www.pdsu.edu.cn/images/fgt13.jpg" alt="Nature" style="width:100%;height:100%;">
                </div>
            </div>
            </div> 
    </div>
  </body>
</html>
